<script setup>
import router from '@/router';
import { ref } from 'vue'
import LayoutNav from '../Layout/components/LayoutNav.vue';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import { useTokenStore } from '@/store/token'

// 获取登录用户信息
const tokenStore = useTokenStore();

//获取订单信息
import { useOrderStore } from '@/store/order';
const orderStore = useOrderStore();
const checkInfo = ref({})  // 订单对象
checkInfo.value = orderStore.checkInfo
console.log(checkInfo.value);

const orderInfo = ref({
    orderId: '',
    orderNo: '',
    orderName: '',
    orderPrice: '',
    orderTime: '',
    orderStatus: '',
    orderStatusDesc: '',
    orderDetail: [],
    payStyle: '支付宝',
    payResult: 'true'
})

orderInfo.value.orderPrice = checkInfo.value.totalPrice
orderInfo.value.orderName = checkInfo.value.goodName

const toOrder = () => {
  orderStore.clearCheckInfo()
  console.log('当前用户身份：', tokenStore.user.identity);
  if (tokenStore.user.identity == '0') {
    router.push('/member/order')
  } else if (tokenStore.user.identity == '1') {
    router.push('/store/purchase')
  } else if (tokenStore.user.identity == '2') {
    router.push('/wholesaler')
  } else if (tokenStore.user.identity == '3') {
    router.push('/factory')
  }
}
const toHome = () => {
  orderStore.clearCheckInfo()
  router.push('/')
}

</script>


<template>
    <LayoutNav></LayoutNav>
  <div class="xtx-pay-page">
    <div class="container">
      <!-- 支付结果 -->
      <div class="pay-result">
        <span class="iconfont icon-queren2 green" v-if="orderInfo.payResult === 'true'"></span>
        <span class="iconfont icon-shanchu red" v-else></span>
        <p class="tit">支付{{ orderInfo.payResult ==='true'?'成功':'失败' }}</p>
        <p class="tip">{{ orderInfo.payResult === 'true'?'商家将尽快为您发货，收货期间请保持手机畅通':'请重新支付或取消订单，谢谢！' }}</p>
        <p>支付方式：<span>{{ orderInfo.payStyle }}</span></p>
        <p>订单商品：<span>{{ orderInfo.orderName }}</span></p>
        <p>支付金额：<span>¥{{ orderInfo.orderPrice }}</span></p>
        <div class="btn">
            <div>
                <el-button @click="toOrder" type="primary" style="margin-right:20px">查看订单</el-button>
            </div>
            <br>
            <div>
                <el-button @click="toHome" type="primary" style="margin-right:20px">返回首页</el-button>
            </div>
        </div>
        <p class="alert">
          <span class="iconfont icon-tip"></span>
          温馨提示：桃禧不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
        </p>
      </div>
    </div>
  </div>
  <LayoutFooter></LayoutFooter>
</template>

<style scoped lang="scss">
.pay-result {
  padding: 50px 0;
  background: #fff;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 15px;

  >.iconfont {
    font-size: 100px;
  }

  .green {
    color: #1dc779;
  }

  .red {
    color: $priceColor;
  }

  .tit {
    font-size: 24px;
  }

  .tip {
    color: #999;
  }

  p {
    line-height: 30px;
    font-size: 16px;
  }

  .btn {
    margin-top: 20px;
  }

  .alert {
    font-size: 12px;
    color: #999;
    margin-top: 20px;
  }
}
</style>